<template>
    <div class="ppt-show">
        <!--        利用swiper组件实现ppt展示-->
        <!--        顶部大图展示-->
        <div class="swiper-container gallery-top swiper-no-swiping"  >
            <div class="swiper-wrapper ">
                <div class="swiper-slide" v-for="(item,index) in this.newList" :key="index" >
                    <img :src="item.pictureUrl" alt=""  @click="picShow">
                </div>

            </div>
            <div class="change" style="display: none">
                <!--                        放大-->
                <div></div>
                <!--                        缩小-->
                <div></div>
                <!--                        放大且自适应-->
                <div ></div>
                <!--                        上一页-->
                <div></div>
                <p class="swiper-button-prev swiper-button-white active" @click="prev"></p>
                <!--                        页数-->
                <div>
                    <nav>{{this.num+1}}</nav>
                    <span style="margin-left: 6px;margin-right: 6px">|</span>
                    <span>{{this.newList.length}}</span>
                </div>
                <!--                        下一页-->
                <div></div>
                <p class="swiper-button-next swiper-button-white active" @click="next"></p>
            </div>


            <!--            上下一页切换-->
            <!-- Add Arrows -->
            <div class="swiper-button-next swiper-button-white" @click="next">下一页</div>
            <div class="swiper-button-prev swiper-button-white" @click="prev">上一页</div>
        </div>

        <!--        底下控制图层-->
        <div class="swiper-container gallery-thumbs">
            <div class="swiper-wrapper" >
                <div class="swiper-slide pic" v-for="(item,index) in this.newList" :key="index"  @click="changeColor(index)" ref="pic">
                    <img :src="item.pictureUrl" alt="" >
                </div>

            </div>
        </div>
        <div class="modal" v-show="isShow">
            <div class="picMax"  ref="picMax" :style="{
                   width:width+'px' , height:height+'px'
               }">
                <img :src="url" alt=""  width="100%" height="100%">
                <img src="../../assets/images/del.png" alt="" class="close" @click="close">
                <div class="change">
                    <!--                        放大-->
                    <div @click="blowUp" ></div>
                    <!--                        缩小-->
                    <div @click="shrink"></div>
                    <!--                        放大且自适应-->
                    <div @click="fit"></div>
                    <!--                        上一页-->
                    <div></div>
                    <p class="swiper-button-prev swiper-button-white active" @click="prev"></p>
                    <!--                        页数-->
                    <div>
                        <nav>{{this.num+1}}</nav>
                        <span style="margin-left: 6px;margin-right: 6px">|</span>
                        <span>{{this.newList.length}}</span>
                    </div>
                    <!--                        下一页-->
                    <div></div>
                    <p class="swiper-button-next swiper-button-white active" @click="next"></p>
                </div>
                <!--            下载-->
                <div class="download" @click="download"></div>
            </div>
        </div>
    </div>
</template>
<script>
    import "swiper/dist/css/swiper.min.css"
    import Swiper from "swiper"
    import {download} from "../../api/api";
    export default {
        data(){
            return{
                num:0,
                isShow:false,
                url:'',
                width: 771,
                height: 512,
                pic:""
            }
        },
        // 接受父组件传来的数组
        props:{
            newList:{
                type:Array,
                required:true
            }
        },
        updated() {
            console.log(this.newList)
            this.$nextTick(function () {
                this.pic =this.$refs.pic
                console.log(this.pic)
            })
        },
        mounted() {
            var galleryTop = new Swiper('.gallery-top', {
                nextButton: '.swiper-button-next',
                prevButton: '.swiper-button-prev',
                spaceBetween: 10,
                observer:true,
                observerParents:true
            });
            var galleryThumbs = new Swiper('.gallery-thumbs', {
                spaceBetween: 10,
                centeredSlides: true,
                slidesPerView: 'auto',
                touchRatio: 0.2,
                slideToClickedSlide: true,
                observer:true,
                observerParents:true,
                watchSlidesVisibility: true,/*避免出现bug*/
                slideThumbActiveClass: 'my-slide-thumb-active',
            });

            galleryTop.params.control = galleryThumbs;
            galleryThumbs.params.control = galleryTop;

        },
        methods:{
            // 背景颜色变化
            changeColor(index){

                for (let i = 0;i<this.pic.length;i++){
                    this.pic[i].style.background="#FFFFFF"
                }
                this.pic[index].style.background="#DFDEDE"
                this.num = index
            },
            // 下一页实现当前背景颜色变成白色  下一个变成灰色
            next(){
                this.num++
                this.pic[this.num-1].style.background="#FFFFFF"
                this.pic[this.num].style.background="#DFDEDE"
                this.url =this.pic[this.num].childNodes[0].src
            },
            // 上一页实现当前背景颜色变成白色  上一个变成灰色
            prev(){
                this.num--
                this.pic[this.num+1].style.background="#FFFFFF"
                this.pic[this.num].style.background="#DFDEDE"
                this.url =this.pic[this.num].childNodes[0].src
            },
            // 所查看的图片显示
            picShow(){
                this.isShow=true
                console.log(this.pic[this.num].childNodes[0].src)
                this.url =this.pic[this.num].childNodes[0].src
            },
            // 放大
            blowUp(){
                if(this.width<=900||this.height<=640){
                    this.width+=50
                    this.height+=50
                }
                this.$refs.picMax[0].style.setProperty("margin","auto")
                // let picMax = document.getElementsByClassName("picMax")[0]
                // picMax.style.setProperty("margin","auto")
            },
            shrink(){
                if(this.width>=771||this.height>=512){
                    this.width -= 50
                    this.height -= 50
                }
                this.$refs.picMax[0].style.setProperty("margin","auto")
                // let picMax = document.getElementsByClassName("picMax")[0]
                // picMax.style.setProperty("margin","auto")
            },
            fit(){
                this.width=800
                this.height=600
            },
            close(){
                this.isShow = false
            },
            download(){
                download(3,this.newList[this.num].pictureName,this.newList[this.num].atlasId).then(res=>{
                    let blob = new Blob([res],{type:"application/ZIP"})
                    let url = window.URL.createObjectURL(blob)
                    window.location.href = url;
                })
            }
        }
    };
</script>
<style scoped lang="less">
    .ppt-show{
        width: 840px;
        height: 714px;
        margin: 44px 0 0 24px ;
    }
    html, body {
        position: relative;
        height: 100%;
    }
    body {
        background: #000;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color:#000;
        margin: 0;
        padding: 0;
    }
    .gallery-top {
        width: 778px!important;
        height: 540px !important;
        margin-left: 25px;
        .swiper-slide{
            width: 771px;
            height: 512px;
            margin: 0 auto;
            position: relative;
        }
        .swiper-slide>img{
            width: 100%;
            height: 100%;
            position: absolute;
        }
    }
    .swiper-slide {
        background-size: cover;
        background-position: center;
    }
    .gallery-top {
        height: 80%;
        width: 100%;
    }
    .gallery-thumbs {
        height: 20%;
        box-sizing: border-box;
        padding: 10px 0;
    }
    .gallery-thumbs .swiper-slide {
        width: 25%;
        height: 100%;
        opacity: 0.4;
    }
    .gallery-thumbs .swiper-slide-active {
        opacity: 1;
    }
    .swiper-button-next,
    .swiper-button-prev{
        background-image: none!important;
        width: 42px;
        height: 22px;
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #85BFE7;
        line-height: 22px;
        top: 542px;
    }

    .swiper-button-prev{
        left: 17px;
    }
    .swiper-button-next{
        right: 0;
    }

    .gallery-thumbs{
        overflow-x: scroll;
    }
    .gallery-thumbs .swiper-slide{
        width: 95px;
        height: 89px;
        /*background: #DFDEDE;*/
        border-radius: 4px;
        margin-right: 4px!important;

    }
    .gallery-thumbs .swiper-slide:nth-child(1){
        background: #DFDEDE;
    }
    .gallery-thumbs img{
        width: 83px;
        height: 57px;
        margin: 16px 6px;
    }
    .gallery-top>.swiper-wrapper{
        /*overflow: auto;*/
        position: relative;
    }
    /*查看图片*/
    .modal{
        width: 1400px;
        height: 876px;
        background-color: rgba(255,255,255,0.8);
        z-index: 1000;
        position: fixed;
        margin-top: -846px;
        margin-left: -305px;
        overflow: scroll!important;
        .picMax{
            margin: 60px auto !important;
            /*background-color: red;*/
            position: relative;
        }
    }
    .close{
        position: absolute;
        top: 30px;
        right: 30px;
    }
    /*修改样式*/
    .change{
        width: 540px;
        height: 51px;
        background: rgba(0,0,0,0.9);
        position: absolute;
        z-index: 100;
        bottom: 14px;
        border-radius: 10px;
        left: 74px;
        display: flex;
        div:nth-child(1){
            width: 47px;
            height: 51px;
            margin-left: 30px;
            background-image: url("../../assets/images/截屏2020-11-26 上午9.19.41.png");
            background-position: 522px 0;
        }
        div:nth-child(2){
            width: 47px;
            height: 51px;
            margin-left: 46px;
            background-image: url("../../assets/images/截屏2020-11-26 上午9.19.41.png");
            background-position: 438px 0;
        }
        div:nth-child(3){
            width: 47px;
            height: 51px;
            margin-left: 46px;
            background-image: url("../../assets/images/截屏2020-11-26 上午9.19.41.png");
            background-position: 352px 0;
        }
        div:nth-child(4){
            width: 47px;
            height: 51px;
            margin-left: 46px;
            background-image: url("../../assets/images/截屏2020-11-26 上午9.19.41.png");
            background-position: 226px 0;
        }
        div:nth-of-type(5){
            width: auto;
            height: 51px;
            margin-left: 10px;
            line-height: 51px;
            display: flex;
            color: #ffffff;
            nav{
                width: 36px;
                height: 26px;
                margin-top: 12px;
                background: rgba(255,255,255,0.3);
                border-radius: 4px;
                line-height: 30px;
                text-align: center;
            }
        }
        div:nth-of-type(6){
            width: 47px;
            height: 51px;
            margin-left: 10px;
            background-image: url("../../assets/images/截屏2020-11-26 上午9.19.41.png");
            background-position: 41px 0;
        }
    }
    .change>.swiper-button-next{
        height: 51px;
        top: 20px;
        color: #ffffff;
        right: 62px;
    }
    .change>.swiper-button-prev{
        height: 51px;
        top: 20px;
        color: #ffffff;
        left: 312px;
    }


    /*下载*/
    .download{
        width: 47px;
        height: 51px;
        background-image: url("../../assets/images/截屏2020-11-26 上午9.20.27.png");
        position: absolute;
        bottom: 14px;
        right: 43px;
        z-index: 100;
        border-radius: 8px;
    }
    .bigPic{
        width: 771px;
        height: 512px;
        margin: 10px auto 0;
    }
</style>
